<template>
	<w-container class='page-bg pa-16'>
		<w-navbar id='my-nav' placeholder title="出售"></w-navbar>
		<view class="pa-16 flex flex-ai-center flex-js-sb br-8 bg-color-white">
			<view class="font-size-14 font-color-666">出售单价</view>
			<view class="font-color-textPrimary font-w-bold"><text class="font-size-10">￥</text> <text
					class="font-size-14">{{info.now_max_price}}</text> </view>
		</view>
		<view class="mt-8 font-size-12 font-color-666 text-right">可出售<text
				class="font-color-textPrimary">{{info.my_collection_count}}</text>个
		</view>
		<view class="pa-16 flex flex-ai-center flex-js-sb br-8 bg-color-white mt-8">
			<view class="font-size-14 font-color-666">出售数量</view>
			<!-- 			<view class="flex flex-ai-center"
				style="width: 201rpx;height: 61rpx;border-radius: 100rpx;border: 1rpx solid #ccc;">
				<view class="pa-10"><w-icon :name="count<=1? 'minus-disable':'minus-active'" size="14"
						@click='minus'></w-icon></view>
				<input v-model="count" type="number" @input="changeCount" class="plr-4 font-color-textPrimary"
					style="width: 126rpx;text-align: center;border-left: 1rpx solid #ccc;border-right: 1rpx solid #ccc;" />
				<view class="pa-10 flex flex-ai-center flex-js-center"><w-icon
						:name="count==info.my_collection_count? 'add-disable':'add-active'" size="14"
						@click='add'></w-icon></view>
			</view> -->
			<view class="font-color-textPrimary font-w-bold"> <text class="font-size-14">{{count}}</text> <text
					class="font-size-10">个</text></view>
		</view>
		<view class="flex flex-ai-center flex-js-sb mt-12">
			<view class="font-size-14 font-color-666" v-if="info.collection_info">消耗藏品: {{info.collection_info.name}}</view>
			<view class="font-size-14 font-color-theme">-{{count}}</view>
		</view>
		<view class="flex flex-ai-center flex-js-sb mt-12">
			<view class="font-size-14 font-color-666">平台服务费{{appConfig.platform_resale_rate}}%</view>
			<view class="font-size-14 font-color-theme">-¥{{seviesPrice}}</view>
		</view>
		<view class="flex flex-ai-center flex-js-sb mt-12">
			<view class="font-size-14 font-color-666">预估成交总价</view>
			<view class="font-size-14 font-color-theme">¥{{totalPrice}}</view>
		</view>
		<view class="rule mt-32">
			<view class="header flex flex-ai-center ">
				<w-icon name="title-icon" size="16"></w-icon>
				<view class="font-color-textPrimary font-size-16 ml-4">出售规则</view>
			</view>
			<view class="mt-12">
				<u-parse :content='appConfig.beg_sale_rule'></u-parse>
			</view>
		</view>
		<view class="action bg-color-pageBg">
			<view class="shop-action-container flex flex-js-sb flex-ai-center">
				<w-button style='width:100%' shape="circle" @click='confirmShow = true'>立即出售</w-button>
			</view>
		</view>
		<w-modal :show="confirmShow" title="" @action="confirmAction" submitText="确定出售">
			<view class="pt-16">
				<view class="flex flex-js-center">
					<w-image v-if="info.collection_info" :src="info.collection_info.listimg" width="70" height="70"  mode="aspectFill"></w-image>
				</view>
				<view v-if="info.collection_info" class="mt-16 font-color-textPrimary font-size-16 font-w-500 text-center">
					{{info.collection_info.name}}
				</view>
				<view class="mt-16 flex flex-ai-center flex-js-sb font-size-14">
					<view class="font-color-666">出售数量:</view>
					<view class="font-color-textPrimary">x{{count}}</view>
				</view>
				<view class="mt-16 flex flex-ai-center flex-js-sb font-size-14">
					<view class="font-color-666">求购单价:</view>
					<view class="font-color-textPrimary">¥{{info.now_max_price}}</view>
				</view>
				<view class="mt-16 flex flex-ai-center flex-js-sb font-size-14">
					<view class="font-color-666">消耗藏品:</view>
					<view class="font-color-theme">x{{count}}</view>
				</view>
			</view>
		</w-modal>
		<u-popup :show="show" mode="center" :closeOnClickOverlay='true' :round='12' bgColor='transparent'>
			<view class="warp ptb-24 plr-16 bg-color-white br-4">
				<view class="color font-size-16 text-center font-w-500">出售</view>
				<view class="flex flex-ai-center flex-js-sb mt-16">
					<view class="flex-1 flex font-color-textPrimary color font-size-14">
						请输入操作密码
					</view>
					<view class="font-color-price font-size-12 flex flex-ai-center"
						@click="$u.route('/pages/my/actionPwd/getCode')">去设置 <w-icon name="arrow-img"
							size="16"></w-icon> </view>
				</view>
				<view class="flex flex-js-sb flex-ai-center mt-16 ptb-8 plr-12 br-12 price-limit item2">
					<view class="flex-1 flex font-color-textPrimary color">
						<input v-model="password" v-if="!passShow" class='price-limit-inp mr-8'
							style="color: #261C0B;text-align: left;" type="password" placeholder="请输入操作密码" name=""
							id="" />
						<input v-model="password" v-else class='price-limit-inp mr-8'
							style="color: #261C0B;text-align: left;" type="number" placeholder="请输入操作密码" name=""
							id="" />
						<u-icon v-if="!passShow" name="eye-fill" style="margin-left: auto;" color="#C8C7C5" size="28"
							@click="passShow=!passShow"></u-icon>
						<u-icon v-else name="eye-off" style="margin-left: auto;" color="#C8C7C5" size="28"
							@click="passShow=!passShow"></u-icon>
					</view>
				</view>
				<view class="bg-color-white flex flex-js-sb mt-32">
					<w-button type="dark" shape="circle" :pain="true" :style="{flex: '1',marginRight:'32rpx'}"
						@click="close">取消</w-button>
					<w-button shape="circle" :style="{flex: '1'}" @click="saleConfirm">确定</w-button>
				</view>
			</view>
		</u-popup>
	</w-container>
</template>

<script>
	import {
		nowBiddingMaxPrice,
		handleFastSell
	} from '@/api/market/index.js'

	export default {
		data() {
			return {
				count: 1,
				info: {},
				confirmShow: false,
				show: false,
				password: '',
				passShow: false
			}
		},
		computed: {
			seviesPrice() {
				if (!this.info.now_max_price) return 0
				const num = this.count * this.info.now_max_price * (this.appConfig.platform_resale_rate / 100)
				return num.toFixed(2)
			},
			totalPrice() {
				if (!this.info.now_max_price) return 0
				const num = this.count * this.info.now_max_price * ((100 - this.appConfig.platform_resale_rate) / 100)
				return num.toFixed(2)
			}
		},
		methods: {
			minus() {
				if (this.count <= 1) return;
				this.count--
			},
			add() {
				if (this.count == this.info.my_collection_count) return;
				this.count++
			},
			getInfo() {
				nowBiddingMaxPrice({
					collection_id: this.id
				}).then((res) => {
					this.info = res.data
				}).catch(() => {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
			confirmAction(e) {
				if (!e) {
					this.confirmShow = false
				} else {
					this.confirmShow = false
					this.show = true
				}
			},
			close() {
				this.show = false
				this.confirmShow = true
			},
			saleConfirm() {
				handleFastSell({
					ideal_price: this.info.now_max_price,
					collection_id: this.id,
					pay_password: this.password
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}).catch(() => {

				}).finally(() => {
					this.show = false
					this.getInfo()
				})
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.action {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.shop-action-container {
			@extend .plr-16, .ptb-8, .flex;
			height: 120rpx;
			width: 100%;


			.price {
				font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
				font-weight: 500;
			}

			.action-btn.no-sub {
				background: linear-gradient(180deg, #434976 0%, #232744 100%);
				;
				@extend .font-color-white;
				border: none;

				/deep/ .u-count-down__text {
					@extend .font-size-12,
					.font-color-white;
				}
			}

			.action-btn {
				width: 480rpx;
				height: 92rpx;
				@extend .border-color-dark,
				.font-color-dark;
				border: 1px solid;
				border-radius: 66rpx;

				/deep/ .u-count-down__text {
					@extend .font-size-12,
					.font-color-dark;
				}
			}
		}


	}

	.item2 {
		border: 3rpx solid #eee;
	}
</style>